<template>
  <div class="vant-demo">
    <h2>Vant 4 组件示例</h2>
    
    <div class="demo-section">
      <h3>按钮组件</h3>
      <div class="button-row">
        <van-button type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>单元格组件</h3>
      <van-cell-group>
        <van-cell title="单元格" value="内容" />
        <van-cell title="单元格" value="内容" label="描述信息" />
      </van-cell-group>
    </div>
    
    <div class="demo-section">
      <h3>图标组件</h3>
      <div class="icon-row">
        <van-icon name="chat-o" />
        <van-icon name="shop-o" />
        <van-icon name="success" />
        <van-icon name="cross" />
        <van-icon name="plus" />
      </div>
    </div>
    
    <div class="demo-section">
      <h3>标签组件</h3>
      <div class="tag-row">
        <van-tag>标签</van-tag>
        <van-tag type="primary">标签</van-tag>
        <van-tag type="success">标签</van-tag>
        <van-tag type="danger">标签</van-tag>
        <van-tag type="warning">标签</van-tag>
      </div>
    </div>
  </div>
</template>

<script setup>
// 使用Vue 3组合式API
</script>

<style scoped>
.vant-demo {
  padding: 16px;
}

.demo-section {
  margin-bottom: 24px;
}

h2 {
  font-size: 20px;
  margin-bottom: 16px;
  color: #323233;
}

h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #323233;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.icon-row {
  display: flex;
  gap: 16px;
}

.tag-row {
  display: flex;
  gap: 8px;
}
</style>
